<template>
    <view class="run-page bg-gray-100 min-h-screen p-4">
      <view class="bg-white rounded-lg shadow-md p-4 mb-4">
        <text class="text-xl font-bold text-green-700 mb-4 block">开始跑步</text>
        
        <view class="flex justify-between items-center mb-4">
          <view class="flex-1 flex flex-col items-center">
            <text class="text-3xl font-bold text-green-600">0.0</text>
            <text class="text-sm text-gray-500">公里</text>
          </view>
          <view class="flex-1 flex flex-col items-center">
            <text class="text-3xl font-bold text-green-600">00:00</text>
            <text class="text-sm text-gray-500">时间</text>
          </view>
          <view class="flex-1 flex flex-col items-center">
            <text class="text-3xl font-bold text-green-600">0</text>
            <text class="text-sm text-gray-500">千卡</text>
          </view>
        </view>
        
        <view class="bg-gray-100 rounded-lg h-60 flex items-center justify-center mb-4">
          <text class="text-gray-400">地图加载中...</text>
        </view>
        
        <button class="bg-green-600 text-white py-3 rounded-lg font-bold w-full">
          开始跑步
        </button>
      </view>
      
      <view class="bg-white rounded-lg shadow-md p-4">
        <text class="text-lg font-bold text-green-700 mb-4 block">跑步记录</text>
        
        <view class="flex items-center py-3 border-b border-gray-100">
          <view class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-green-600 font-bold">5</text>
          </view>
          <view class="flex-1">
            <text class="font-medium">2023-05-15</text>
            <text class="text-xs text-gray-500 block">19:30-20:00 · 30分钟</text>
          </view>
          <text class="text-green-600 font-bold">5.2km</text>
        </view>
        
        <view class="flex items-center py-3">
          <view class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
            <text class="text-green-600 font-bold">4</text>
          </view>
          <view class="flex-1">
            <text class="font-medium">2023-05-14</text>
            <text class="text-xs text-gray-500 block">18:00-18:25 · 25分钟</text>
          </view>
          <text class="text-green-600 font-bold">4.0km</text>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  // 这里可以添加跑步页面的逻辑
  </script>